<template>
	<div>
		<div class="bbb">产量信息统计<span>示例产线的月统计</span></div>
		<div id="ddd"></div>
		<echart-c></echart-c>
	</div>
</template>

<script>
	import axios from 'axios'
	import * as echarts from 'echarts';
	import EchartC from '@/components/EchartC.vue'
	export default {
		components: {
			EchartC
		},
		mounted() {
			this.echartsTop()
		},
		created() {
			this.getProduct()
		},
		methods: {
			getProduct() {
				axios.get("api/Product")
					.then(res => {
						if (res.data.code === 0) {
							this.list = res.data.data.list3
							this.list.forEach(item => {
								this.list1.push(item.id)
							})
							this.$nextTick(() => {
								this.echartsTop();
							});
						}
					})
			},
			echartsTop() {
				var echart = echarts.init(document.getElementById("ddd"));
				var option = {
					title: {
						text: "当天的24小时产量分布信息"
					},
					xAxis: {
						type: 'category',
						data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15',
							'16', '17', '18', '19', '20', '21', '22', '23', '24'
						]
					},
					yAxis: {
						type: "value"
					},
					series: [{
						data: this.list1,
						type: 'bar',
						color: ["#cc6001"]
					}]
				};
				echart.setOption(option);
				this.list1 = [];
			},
		},
		data() {
			return {
				list: [],
				list1: []
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bbb {
		font-size: 24px;

		span {
			font-size: 15px;
		}
	}

	#ddd {
		height: 350px;
		width: 100%;
		border-top: 4px solid #007300;
		background-color: #fff;
		padding: 20px;
	}
</style>
